<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<image src="/static/search.png" mode="aspectFit" class="search-icon"></image>
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
		</view>
		
		<!-- 轮播图 -->
		<swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image :src="item.image" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 分类导航 -->
		<view class="nav-section">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="navigateToCategory(item)">
				<image :src="item.icon" mode="aspectFit" class="nav-icon"></image>
				<text class="nav-name">{{item.name}}</text>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-section">
			<view class="section-title">热门商品</view>
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in products" :key="index" @tap="viewProduct(item)">
					<image :src="item.image" mode="aspectFill" class="product-image"></image>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<text class="product-price">¥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [
					{ image: '/static/banner/banner1.jpg' },
					{ image: '/static/banner/banner2.jpg' },
					{ image: '/static/banner/banner3.jpg' }
				],
				navItems: [
					{ name: '钻石', icon: '/static/category/diamond.png', type: 'diamond' },
					{ name: '黄金', icon: '/static/category/gold.png', type: 'gold' },
					{ name: '铂金', icon: '/static/category/platinum.png', type: 'platinum' },
					{ name: '翡翠', icon: '/static/category/jade.png', type: 'jade' }
				],
				products: [
					{
						name: '18K金钻石戒指',
						price: 9999,
						image: '/static/products/ring.png'
					},
					{
						name: '天然翡翠手镯',
						price: 8888,
						image: '/static/products/bracelet.png'
					},
					{
						name: '铂金项链',
						price: 6666,
						image: '/static/products/necklace.png'
					},
					{
						name: '黄金手链',
						price: 3999,
						image: '/static/products/chain.png'
					}
				]
			}
		},
		methods: {
			navigateToCategory(item) {
				uni.showToast({
					title: '跳转到' + item.name + '分类',
					icon: 'none'
				})
			},
			viewProduct(item) {
				uni.showToast({
					title: '查看' + item.name,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.search-bar {
		padding: 20rpx;
		background-color: #fff;
	}
	
	.search-input {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.placeholder {
		color: #999;
		font-size: 28rpx;
	}
	
	.banner {
		height: 300rpx;
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
	
	.nav-section {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}
	
	.nav-name {
		font-size: 24rpx;
		color: #333;
	}
	
	.product-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.product-item {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.product-image {
		width: 100%;
		height: 300rpx;
	}
	
	.product-info {
		padding: 10rpx;
	}
	
	.product-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.product-price {
		font-size: 32rpx;
		color: #F3B250;
		font-weight: bold;
	}
</style>
